<template>
	<div>
		<div id="" v-if="cartlist.length<=0">
			你没有选择商品，购物车为空，快去购物吧
		</div>
		<table v-else>
			<caption>
				<h1>购物车</h1>
			</caption>
			<tr>
				<th></th>
				<th>编号</th>
				<th>商品名称</th>
				<th>商品价格</th>
				<th>购买数量</th>
				<th>操作</th>
			</tr>
			<tr v-for="(item,index) in cartlist">
				<td><input type="checkbox" :key="item.id" v-model="item.checkbox" name="" id="" value="" /></td>
				<td>{{item.id}}</td>
				<td>{{item.name}}</td>
				<td><small>￥</small>{{item.price.toFixed(2)}}</td>
				<td>
					<button @click="item.count--" :disabled="item.count<=0">-</button>
					{{item.count}}
					<button type="button" @click="item.count++">+</button>
				</td>
				<td><a href="#" @click.prevent="del(index)">删除</a></td>
			</tr>
			<tr>
				<td colspan="3">总价</td>
				<td colspan="3">{{totalPrice}}</td>
			</tr>
			<tr>
				<td colspan="3">账户余额</td>
				<td colspan="3">{{zhifu}}</td>
			</tr>
			<tr><button @click="zhifu" type="button">提交订单</button></tr>
		</table>
	</div>

</template>
<script>
	export default {
		name: 'App',
		data() {
			return {
				cartlist: [{
						id: 1,
						checkbox: false,
						name: '《细说PHP》',
						price: 79,
						count: 1
					},
					{
						id: 2,
						checkbox: false,
						name: '《细说JAVA》',
						price: 59,
						count: 1
					},
					{
						id: 3,
						checkbox: false,
						name: '《细说Vue》',
						price: 69,
						count: 1
					},
					{
						id: 4,
						checkbox: false,
						name: '《细说C》',
						price: 99,
						count: 1
					},
					{
						id: 5,
						checkbox: false,
						name: '《细说C++》',
						price: 79,
						count: 1
					},
					{
						id: 6,
						checkbox: false,
						name: '《细说API》',
						price: 129,
						count: 1
					},
				]
			}
		},
		computed: {
			totalPrice: {
				get() {
					let sum = 0;
					for (let book of this.cartlist) {
						if (book.checkbox == true) {
							sum += book.price * book.count;
						}
					}
					return "￥" + sum.toFixed(2);
				}		
			},
			zhifu:{
				get(){
					let sun=5000;
					let sum = 0;
					for (let book of this.cartlist) {
						if (book.checkbox == true) {
							sum += book.price * book.count;
						}
					}
					if(sun>sum){
						sun=sun-sum;
						return "支付成功";
					}else{
						return "余额不足"
					}
				}
			}
		},
		methods: {
			del(index) {
				this.cartlist.splice(index, 1);
			}
		}
	}
</script>
<style scoped>
	table {
		width: 600px;
		border: 1px solid #888888;
		border-collapse: collapse;

	}

	td,
	th {
		border: 1px solid #888888;
		padding: 10px;
	}
</style>
